<template>
  <div>
    <span class="patient-item">{{ $store.state.currentPatient.id }}</span>
    <span class="patient-item">{{ $store.state.currentPatient.caseNumber }}</span>
    <span class="patient-item">{{ $store.state.currentPatient.realName }}</span>
    <span class="patient-item">{{ $store.state.currentPatient.gender }}</span>

    <el-form
        label-position="right"
        label-width="100px"
        :model="medicalRecord"
        style="max-width: 100%">
      <el-form-item label="主诉">
        <el-input v-model="medicalRecord.readme"/>
      </el-form-item>
      <el-form-item label="现病史">
        <el-input v-model="medicalRecord.present"/>
      </el-form-item>
      <el-form-item label="现病治疗情况">
        <el-input v-model="medicalRecord.presentTreat"/>
      </el-form-item>
      <el-form-item label="既往史">
        <el-input v-model="medicalRecord.history"/>
      </el-form-item>
      <el-form-item label="过敏史">
        <el-input v-model="medicalRecord.allergy"/>
      </el-form-item>
      <el-form-item label="体格检查">
        <el-input v-model="medicalRecord.physique"/>
      </el-form-item>
      <el-form-item label="诊断">
        <el-table :data="diagnosis" ref="diseaseTable" border style="width: 100%">
          <el-table-column type="selection"/>
          <el-table-column prop="diseaseCode" label="疾病编码"/>
          <el-table-column prop="diseaseName" label="疾病名称"/>
          <el-table-column prop="diseaseICD" label="国际ICD编码"/>
          <el-table-column prop="diseaseCategory" label="疾病类型"/>
          <el-table-column align="right">
            <template #header>
              <el-button type="success" plain @click="addDisease">添加</el-button>
              <el-button type="danger" plain @click="delDisease">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <DiseaseSearchView :store="$store" @send="receiveDisease"></DiseaseSearchView>
      </el-form-item>
      <el-form-item label="检查检验建议">
        <el-input v-model="medicalRecord.proposal"/>
      </el-form-item>
      <el-form-item label="注意事项">
        <el-input v-model="medicalRecord.careful"/>
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            @click="onSubmit">
          保存
        </el-button>
        <el-button
            @click="onReset">
          清空
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import DiseaseSearchView from "@/views/DiseaseSearchView";

export default {
  name: "MedicalRecordView",
  components: {DiseaseSearchView},
  data() {
    return {
      diagnosis: [],
      medicalRecord: {
        registerId: this.$store.state.currentPatient.id,
        readme: '主诉',
        present: '现病史',
        presentTreat: '现病治疗情况',
        history: '既往史',
        allergy: '过敏史',
        physique: '体检检查',
        proposal: '检查检验建议',
        careful: '注意事项',
        diagnosis: '诊断结果',
        care: '处理意见'
      }
    }
  },
  methods: {
    onSubmit() {
      this.medicalRecord.diseases = this.diagnosis
      axios({
        url: '/api/medical_record/insert',
        method: 'post',
        data: this.medicalRecord
      }).then(res => {
        this.$router.push('/home/physician-patient')
      }).catch(err => {
      }).then(() => {
      })
    },
    addDisease() {
      this.$store.commit("setDiseaseSearchVisible", true)
    },
    delDisease() {
      this.diagnosis = this.diagnosis.filter(item => {
        for (let selectRow of this.$refs.diseaseTable.getSelectionRows()) {
          if (selectRow.id == item.id) {
            return false
          }
        }
        return true
      })
    },
    onReset() {
      this.medicalRecord.readme = '';
      this.medicalRecord.present = '';
      this.medicalRecord.presentTreat = '';
      this.medicalRecord.history = '';
      this.medicalRecord.allergy = '';
      this.medicalRecord.physique = '';
      this.medicalRecord.proposal = '';
      this.medicalRecord.careful = '';
      this.medicalRecord.diagnosis = '';
      this.medicalRecord.care = '';
    },
    receiveDisease(disease_list) {
      this.diagnosis.push(...disease_list)
    }
  }
}
</script>

<style scoped>
.patient-item {
  width: 100px;
  margin: 10px;
  background: var(--el-color-primary);
  color: white;
  display: inline-block;
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>